<template>
  <div class="blur-tool-container">
    <!-- 顶部导航 -->
    <div class="tool-header">
      <el-button type="text" @click="goBack" class="back-btn">
        <el-icon><ArrowLeft /></el-icon>
        返回首页
      </el-button>
      <h1 class="tool-title">魔法擦除工具</h1>
      <p class="tool-description">智能擦除选择区域，根据背景自动填充</p>
    </div>

    <!-- 主要内容区域 -->
    <div class="tool-content">
      <el-row :gutter="60">
        <!-- 左侧控制面板 -->
        <el-col :span="7">
          <el-card class="control-panel" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><Setting /></el-icon>
                <span>控制面板</span>
              </div>
            </template>

            <!-- 文件上传 -->
            <div class="upload-section">
              <el-upload 
                class="upload-demo" 
                drag 
                multiple
                :show-file-list="true"
                :before-upload="handleFileUpload"
                :on-remove="handleFileRemove"
                accept="image/*"
              >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">将图片拖拽到此处，或<em>点击上传</em></div>
                <template #tip>
                  <div class="el-upload__tip">支持多选上传jpg/png/gif文件，且每个文件不超过10MB</div>
                </template>
              </el-upload>
            </div>

            <!-- 擦除设置 -->
            <div class="erase-settings" v-if="imageUrl">
              <h3>擦除设置</h3>

              <!-- 擦除模式选择 -->
              <div class="setting-item">
                <label>擦除模式</label>
                <el-radio-group v-model="eraseMode" @change="onEraseModeChange">
                  <el-radio value="smart">智能填充</el-radio>
                  <el-radio value="blur">模糊填充</el-radio>
                </el-radio-group>
              </div>

              <div class="setting-item">
                <label>填充强度</label>
                <el-slider v-model="fillIntensity" :min="1" :max="10" :step="1" show-stops show-tooltip @change="updateFillEffect" />
                <span class="value-display">级别 {{ fillIntensity }}</span>
              </div>

              <div class="setting-item">
                <label>边缘融合</label>
                <el-slider v-model="edgeBlending" :min="0" :max="20" :step="1" show-stops show-tooltip @change="updateFillEffect" />
                <span class="value-display">{{ edgeBlending }}px</span>
              </div>

              <!-- 区域擦除提示 -->
              <div class="area-erase-tip">
                <el-alert title="魔法擦除模式" type="info" :closable="false" show-icon>
                  <template #default> 在右侧图片上拖拽鼠标选择要擦除的区域，工具会根据周围背景智能填充 </template>
                </el-alert>

                <!-- 应用擦除按钮 -->
                <el-button v-if="selectionBox.visible" type="primary" @click="applyMagicErase" style="width: 100%; margin-top: 15px" size="default" :loading="isProcessing">
                  <el-icon><Magic /></el-icon>
                  {{ isProcessing ? '处理中...' : '应用魔法擦除' }}
                </el-button>
              </div>

              <!-- 操作按钮 -->
              <div class="action-buttons">
                <el-button type="primary" @click="applyMagicEraseToAll" size="large" class="action-btn" :loading="isProcessing">
                  <el-icon><Magic /></el-icon>
                  {{ isProcessing ? '处理中...' : '应用到所有图片' }}
                </el-button>
                <el-button type="primary" @click="downloadImage" size="large" class="action-btn">
                  <el-icon><Download /></el-icon>
                  下载图片
                </el-button>
                <el-button type="info" @click="resetImage" size="large" class="action-btn">
                  <el-icon><RefreshRight /></el-icon>
                  重置
                </el-button>
                <el-button type="info" v-if="selectionBox.visible" @click="clearSelection" size="large" class="action-btn">
                  <el-icon><Delete /></el-icon>
                  清除选区
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧预览区域 -->
        <el-col :span="17">
          <el-card class="preview-panel" shadow="hover">
            <div class="preview-content">
              <div v-if="!imageUrl" class="empty-preview">
                <el-icon class="empty-icon"><Picture /></el-icon>
                <p>请先上传图片</p>
              </div>
              <div v-else class="image-preview">
                <!-- 图片列表 -->
                <div class="image-list" v-if="imageList.length > 1">
                  <el-scrollbar>
                    <div class="image-list-inner">
                      <div
                        v-for="(img, index) in imageList"
                        :key="index"
                        class="image-item"
                        :class="{ active: index === currentImageIndex }"
                        @click="switchImage(index)"
                      >
                        <img :src="img.url" :alt="'图片' + (index + 1)" />
                        <div class="image-number">{{ index + 1 }}</div>
                      </div>
                    </div>
                  </el-scrollbar>
                </div>

                <div class="preview-tabs">
                  <el-tabs v-model="activeTab" class="demo-tabs">
                    <el-tab-pane label="原图" name="original">
                      <div class="image-container">
                        <div
                          class="image-wrapper"
                          ref="imageWrapper"
                          @mousedown="startSelection"
                          @mousemove="updateSelection"
                          @mouseup="endSelection"
                          @mouseleave="endSelection"
                          :style="{ cursor: 'crosshair' }">
                          <img :src="imageUrl" alt="原图" class="preview-image" ref="originalImage" @load="onImageLoad" draggable="false" />
                          <!-- 选择框 -->
                          <div
                            v-if="selectionBox.visible"
                            class="selection-box"
                            :style="{
                              left: selectionBox.x + 'px',
                              top: selectionBox.y + 'px',
                              width: selectionBox.width + 'px',
                              height: selectionBox.height + 'px',
                            }">
                            <div class="selection-border"></div>
                            <div class="selection-info">{{ Math.round(selectionBox.width) }} × {{ Math.round(selectionBox.height) }}</div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="效果预览" name="processed">
                      <div class="image-container">
                        <canvas ref="processedCanvas" class="preview-image" style="display: none"></canvas>
                        <img v-if="processedImageUrl" :src="processedImageUrl" alt="处理后" class="preview-image" />
                        <img v-else :src="imageUrl" alt="原图" class="preview-image" />
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

const router = useRouter();
const activeTab = ref('original');
const imageList = reactive([]); // 存储所有图片信息
const currentImageIndex = ref(0); // 当前显示的图片索引
const processedImages = reactive([]); // 存储所有处理后的图片
const fillIntensity = ref(5);
const edgeBlending = ref(5);
const eraseMode = ref('smart'); // 'smart' 或 'blur'
const isProcessing = ref(false);

// 图片和画布引用
const originalImage = ref(null);
const processedCanvas = ref(null);
const imageWrapper = ref(null);

// 选择框状态
const selectionBox = reactive({
  visible: false,
  x: 0,
  y: 0,
  width: 0,
  height: 0,
  startX: 0,
  startY: 0,
  isSelecting: false,
});

// 图片信息
const imageInfo = reactive({
  naturalWidth: 0,
  naturalHeight: 0,
  displayWidth: 0,
  displayHeight: 0,
  scaleX: 1,
  scaleY: 1,
});

// 计算属性
const imageUrl = computed(() => {
  return imageList[currentImageIndex.value]?.url || '';
});

const processedImageUrl = computed(() => {
  return processedImages[currentImageIndex.value] || '';
});

// 返回首页
const goBack = () => {
  router.push('/');
};

// 处理文件上传
const handleFileUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  if (!isImage) {
    ElMessage.error('请上传图片文件!');
    return false;
  }

  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    ElMessage.error('图片大小不能超过 10MB!');
    return false;
  }

  // 创建文件预览URL
  const reader = new FileReader();
  reader.onload = (e) => {
    imageList.push({
      url: e.target.result,
      name: file.name
    });
    if (imageList.length === 1) {
      ElMessage.success('已上传第一张图片，请在图片上选择要处理的区域');
    } else {
      ElMessage.success('图片上传成功!');
    }
  };
  reader.readAsDataURL(file);

  return false; // 阻止自动上传
};

// 处理文件移除
const handleFileRemove = (file, fileList) => {
  const index = imageList.findIndex(img => img.name === file.name);
  if (index > -1) {
    imageList.splice(index, 1);
    processedImages.splice(index, 1);
    if (currentImageIndex.value >= imageList.length) {
      currentImageIndex.value = Math.max(0, imageList.length - 1);
    }
    if (imageList.length === 0) {
      clearSelection();
    }
  }
};

// 切换图片
const switchImage = (index) => {
  if (index >= 0 && index < imageList.length) {
    currentImageIndex.value = index;
    activeTab.value = processedImages[index] ? 'processed' : 'original';
  }
};

// 图片加载完成
const onImageLoad = () => {
  if (!originalImage.value) return;

  const img = originalImage.value;
  imageInfo.naturalWidth = img.naturalWidth;
  imageInfo.naturalHeight = img.naturalHeight;
  imageInfo.displayWidth = img.offsetWidth;
  imageInfo.displayHeight = img.offsetHeight;
  imageInfo.scaleX = imageInfo.naturalWidth / imageInfo.displayWidth;
  imageInfo.scaleY = imageInfo.naturalHeight / imageInfo.displayHeight;
};

// 擦除模式改变
const onEraseModeChange = () => {
  clearSelection();
  processedImageUrl.value = '';
};

// 更新填充效果
const updateFillEffect = () => {
  // 如果有处理过的图片，可以实时更新效果
  if (processedImageUrl.value && selectionBox.visible) {
    // 这里可以添加实时预览逻辑
  }
};

// 开始选择区域
const startSelection = (event) => {
  const rect = imageWrapper.value.getBoundingClientRect();
  const img = originalImage.value;
  const imgRect = img.getBoundingClientRect();

  // 确保点击在图片内
  if (event.clientX < imgRect.left || event.clientX > imgRect.right || event.clientY < imgRect.top || event.clientY > imgRect.bottom) {
    return;
  }

  selectionBox.isSelecting = true;
  selectionBox.startX = event.clientX - imgRect.left;
  selectionBox.startY = event.clientY - imgRect.top;
  selectionBox.x = selectionBox.startX;
  selectionBox.y = selectionBox.startY;
  selectionBox.width = 0;
  selectionBox.height = 0;
  selectionBox.visible = true;

  event.preventDefault();
};

// 更新选择区域
const updateSelection = (event) => {
  if (!selectionBox.isSelecting) return;

  const img = originalImage.value;
  const imgRect = img.getBoundingClientRect();

  const currentX = Math.max(0, Math.min(event.clientX - imgRect.left, imageInfo.displayWidth));
  const currentY = Math.max(0, Math.min(event.clientY - imgRect.top, imageInfo.displayHeight));

  selectionBox.x = Math.min(selectionBox.startX, currentX);
  selectionBox.y = Math.min(selectionBox.startY, currentY);
  selectionBox.width = Math.abs(currentX - selectionBox.startX);
  selectionBox.height = Math.abs(currentY - selectionBox.startY);
};

// 结束选择区域
const endSelection = () => {
  if (selectionBox.isSelecting) {
    selectionBox.isSelecting = false;
    if (selectionBox.width > 10 && selectionBox.height > 10) {
      ElMessage.success('区域选择完成，点击"应用魔法擦除"按钮生成效果');
    } else {
      clearSelection();
      ElMessage.info('选择区域太小，请重新选择');
    }
  }
};

// 清除选区
const clearSelection = () => {
  selectionBox.visible = false;
  selectionBox.isSelecting = false;
  selectionBox.x = 0;
  selectionBox.y = 0;
  selectionBox.width = 0;
  selectionBox.height = 0;
  processedImageUrl.value = '';
};

// 获取周围像素的平均颜色
const getAverageColor = (imageData, x, y, width, height, sampleSize = 10) => {
  const data = imageData.data;
  let r = 0,
    g = 0,
    b = 0,
    count = 0;

  // 采样边缘像素
  for (let i = 0; i < sampleSize; i++) {
    for (let j = 0; j < sampleSize; j++) {
      // 上边缘
      if (y > 0) {
        const idx = ((y - 1) * imageData.width + x + i) * 4;
        if (idx >= 0 && idx < data.length) {
          r += data[idx];
          g += data[idx + 1];
          b += data[idx + 2];
          count++;
        }
      }

      // 下边缘
      if (y + height < imageData.height) {
        const idx = ((y + height) * imageData.width + x + i) * 4;
        if (idx >= 0 && idx < data.length) {
          r += data[idx];
          g += data[idx + 1];
          b += data[idx + 2];
          count++;
        }
      }

      // 左边缘
      if (x > 0) {
        const idx = ((y + j) * imageData.width + x - 1) * 4;
        if (idx >= 0 && idx < data.length) {
          r += data[idx];
          g += data[idx + 1];
          b += data[idx + 2];
          count++;
        }
      }

      // 右边缘
      if (x + width < imageData.width) {
        const idx = ((y + j) * imageData.width + x + width) * 4;
        if (idx >= 0 && idx < data.length) {
          r += data[idx];
          g += data[idx + 1];
          b += data[idx + 2];
          count++;
        }
      }
    }
  }

  return count > 0 ? [r / count, g / count, b / count] : [128, 128, 128];
};

// 智能填充算法
const smartFill = (canvas, ctx, x, y, width, height) => {
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 获取周围的平均颜色
  const avgColor = getAverageColor(imageData, x, y, width, height);

  // 创建噪声和渐变效果
  for (let py = y; py < y + height; py++) {
    for (let px = x; px < x + width; px++) {
      if (px >= 0 && px < canvas.width && py >= 0 && py < canvas.height) {
        const idx = (py * canvas.width + px) * 4;

        // 计算距离边缘的距离
        const distToEdge = Math.min(px - x, x + width - px, py - y, y + height - py);

        // 添加一些随机噪声使填充更自然
        const noise = (Math.random() - 0.5) * 30 * (fillIntensity.value / 10);

        // 边缘融合效果
        const blendFactor = Math.min(1, distToEdge / Math.max(1, edgeBlending.value));

        if (distToEdge <= edgeBlending.value) {
          // 边缘区域：与原始像素混合
          const originalR = data[idx];
          const originalG = data[idx + 1];
          const originalB = data[idx + 2];

          data[idx] = originalR * (1 - blendFactor) + (avgColor[0] + noise) * blendFactor;
          data[idx + 1] = originalG * (1 - blendFactor) + (avgColor[1] + noise) * blendFactor;
          data[idx + 2] = originalB * (1 - blendFactor) + (avgColor[2] + noise) * blendFactor;
        } else {
          // 内部区域：使用计算出的颜色
          data[idx] = Math.max(0, Math.min(255, avgColor[0] + noise));
          data[idx + 1] = Math.max(0, Math.min(255, avgColor[1] + noise));
          data[idx + 2] = Math.max(0, Math.min(255, avgColor[2] + noise));
        }
      }
    }
  }

  ctx.putImageData(imageData, 0, 0);
};

// 模糊填充算法
const blurFill = (canvas, ctx, x, y, width, height) => {
  // 先对选择区域应用强模糊
  const tempCanvas = document.createElement('canvas');
  const tempCtx = tempCanvas.getContext('2d');
  tempCanvas.width = width;
  tempCanvas.height = height;

  // 提取选择区域
  const imageData = ctx.getImageData(x, y, width, height);
  tempCtx.putImageData(imageData, 0, 0);

  // 应用模糊效果
  tempCtx.filter = `blur(${fillIntensity.value * 3}px)`;
  tempCtx.drawImage(tempCanvas, 0, 0);

  // 将模糊后的区域绘制回主画布
  ctx.drawImage(tempCanvas, x, y);

  // 如果有边缘融合，添加边缘处理
  if (edgeBlending.value > 0) {
    const gradient = ctx.createRadialGradient(x + width / 2, y + height / 2, 0, x + width / 2, y + height / 2, Math.max(width, height) / 2);
    gradient.addColorStop(0, 'rgba(0,0,0,1)');
    gradient.addColorStop(1, 'rgba(0,0,0,0)');

    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = gradient;
    ctx.fillRect(x - edgeBlending.value, y - edgeBlending.value, width + edgeBlending.value * 2, height + edgeBlending.value * 2);
    ctx.globalCompositeOperation = 'source-over';
  }
};

// 应用魔法擦除
const applyMagicErase = async () => {
  if (!originalImage.value || !processedCanvas.value) return;

  isProcessing.value = true;

  try {
    const canvas = processedCanvas.value;
    const ctx = canvas.getContext('2d');
    const img = originalImage.value;

    // 设置画布尺寸为图片原始尺寸
    canvas.width = imageInfo.naturalWidth;
    canvas.height = imageInfo.naturalHeight;

    // 绘制原始图片
    ctx.drawImage(img, 0, 0, imageInfo.naturalWidth, imageInfo.naturalHeight);

    // 计算实际选择区域（转换为原始图片坐标）
    const realX = Math.floor(selectionBox.x * imageInfo.scaleX);
    const realY = Math.floor(selectionBox.y * imageInfo.scaleY);
    const realWidth = Math.floor(selectionBox.width * imageInfo.scaleX);
    const realHeight = Math.floor(selectionBox.height * imageInfo.scaleY);

    // 根据模式应用不同的填充算法
    if (eraseMode.value === 'smart') {
      smartFill(canvas, ctx, realX, realY, realWidth, realHeight);
    } else {
      blurFill(canvas, ctx, realX, realY, realWidth, realHeight);
    }

    // 保存处理后的图片
    processedImages[currentImageIndex.value] = canvas.toDataURL('image/png');
    activeTab.value = 'processed';
    ElMessage.success('魔法擦除效果已应用!');
  } catch (error) {
    console.error('处理图片时出错:', error);
    ElMessage.error('处理图片时出错，请重试');
  } finally {
    isProcessing.value = false;
  }
};

// 应用魔法擦除到所有图片
const applyMagicEraseToAll = async () => {
  if (!selectionBox.visible || imageList.length === 0) {
    ElMessage.warning('请先选择要处理的区域!');
    return;
  }

  isProcessing.value = true;
  const totalImages = imageList.length;
  let processedCount = 0;

  try {
    for (let i = 0; i < imageList.length; i++) {
      currentImageIndex.value = i;
      await nextTick();
      
      const canvas = processedCanvas.value;
      const ctx = canvas.getContext('2d');
      const img = new Image();
      
      await new Promise((resolve, reject) => {
        img.onload = resolve;
        img.onerror = reject;
        img.src = imageList[i].url;
      });

      // 设置画布尺寸为图片原始尺寸
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;

      // 绘制原始图片
      ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);

      // 计算实际选择区域（转换为原始图片坐标）
      const realX = Math.floor(selectionBox.x * imageInfo.scaleX);
      const realY = Math.floor(selectionBox.y * imageInfo.scaleY);
      const realWidth = Math.floor(selectionBox.width * imageInfo.scaleX);
      const realHeight = Math.floor(selectionBox.height * imageInfo.scaleY);

      // 根据模式应用不同的填充算法
      if (eraseMode.value === 'smart') {
        smartFill(canvas, ctx, realX, realY, realWidth, realHeight);
      } else {
        blurFill(canvas, ctx, realX, realY, realWidth, realHeight);
      }

      // 保存处理后的图片
      processedImages[i] = canvas.toDataURL('image/png');
      processedCount++;
      
      ElMessage.success(`已处理 ${processedCount}/${totalImages} 张图片`);
    }

    // 处理完成后显示第一张图片
    currentImageIndex.value = 0;
    activeTab.value = 'processed';
    ElMessage.success('所有图片处理完成!');
  } catch (error) {
    console.error('处理图片时出错:', error);
    ElMessage.error('处理图片时出错，请重试');
  } finally {
    isProcessing.value = false;
  }
};

// 下载图片
const downloadImage = () => {
  if (imageList.length === 0) return;

  if (processedImages.length > 0) {
    ElMessageBox.prompt('请输入图片文件名前缀', '批量下载', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPlaceholder: '例如：magic_erased',
      inputPattern: /^[a-zA-Z0-9_\-]+$/,
      inputErrorMessage: '文件名前缀只能包含字母、数字、下划线和连字符'
    }).then(({ value }) => {
      processedImages.forEach((url, index) => {
        if (url) {
          const a = document.createElement('a');
          a.href = url;
          // 使用前缀_序号.png的格式
          a.download = `${value}_${(index + 1).toString().padStart(2, '0')}.png`;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
      ElMessage.success('图片下载成功!');
    }).catch(() => {
      // 用户取消下载，不做任何操作
    });
  } else {
    ElMessage.warning('请先应用魔法擦除效果!');
  }
};

// 重置所有图片
const resetImage = () => {
  imageList.length = 0;
  processedImages.length = 0;
  currentImageIndex.value = 0;
  fillIntensity.value = 5;
  edgeBlending.value = 5;
  eraseMode.value = 'smart';
  activeTab.value = 'original';
  clearSelection();
  ElMessage.info('已重置所有设置');
};
</script>

<style lang="scss" scoped>
.blur-tool-container {
  min-height: 100vh;
  width: 100%;
  background: #f0f0f0;
  padding: 40px 80px;
  overflow-x: hidden;
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.tool-header {
  text-align: center;
  margin-bottom: 50px;
  position: relative;

  .back-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    padding: 20px 20px;
    background: #000;
    color: #fff;
    border: 3px solid #000;
    border-radius: 0;
    font-weight: bold;
    transition: all 0.2s ease;
    border-radius: 10px;

    .el-icon {
      margin-right: 8px;
    }

    &:hover {
      background: #fff;
      color: #000;
      transform: translateY(-50%) translateX(-5px) translateY(-5px);
      box-shadow: 5px 5px 0px #000;
    }
  }

  .tool-title {
    font-size: 42px;
    font-weight: 900;
    color: #000;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: -2px;
    text-shadow: 3px 3px 0px #ff6b6b;
  }

  .tool-description {
    font-size: 18px;
    color: #333;
    margin: 0;
    font-weight: 500;
  }
}

.tool-content {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;

  .el-icon {
    margin-right: 10px;
    color: #ff6b6b;
    font-size: 18px;
  }
}

.control-panel {
  height: fit-content;
  background: #fff;
  border: 4px solid #000;
  border-radius: 0;
  box-shadow: 8px 8px 0px #000;

  :deep(.el-card__header) {
    padding: 25px 30px;
    border-bottom: 4px solid #000;
    background: #ff6b6b;
    color: #000;
  }

  :deep(.el-card__body) {
    padding: 30px;
  }

  .upload-section {
    margin-bottom: 40px;

    :deep(.el-upload-dragger) {
      border-radius: 0;
      border: 4px dashed #000;
      background: #fff;
      padding: 40px 20px;
      transition: all 0.2s ease;

      &:hover {
        border-color: #ff6b6b;
        background: #fff;
        transform: translateX(-3px) translateY(-3px);
        box-shadow: 6px 6px 0px #000;
      }

      .el-icon--upload {
        font-size: 48px;
        color: #000;
        margin-bottom: 20px;
      }

      .el-upload__text {
        font-size: 16px;
        color: #000;
        font-weight: 600;

        em {
          color: #ff6b6b;
          font-weight: 900;
        }
      }
    }

    :deep(.el-upload__tip) {
      font-size: 14px;
      color: #666;
      margin-top: 15px;
      font-weight: 500;
    }
  }

  .erase-settings {
    h3 {
      font-size: 18px;
      color: #000;
      margin-bottom: 25px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .setting-item {
      margin-bottom: 30px;

      label {
        display: block;
        font-weight: 900;
        margin-bottom: 15px;
        color: #000;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .value-display {
        font-size: 14px;
        color: #000;
        margin-left: 15px;
        font-weight: 900;
        text-transform: uppercase;
      }

      :deep(.el-slider) {
        margin: 15px 0;

        .el-slider__runway {
          border: 3px solid #000;
          background: #fff;
          border-radius: 0;
        }

        .el-slider__bar {
          background: #000;
          border-radius: 0;
        }

        .el-slider__button {
          border: 3px solid #000;
          background: #fff;
          border-radius: 0;
          width: 20px;
          height: 20px;

          &:hover {
            transform: scale(1.2);
            box-shadow: 3px 3px 0px #ff6b6b;
          }
        }

        .el-slider__stops {
          .el-slider__stop {
            background: #000;
            border-radius: 0;
            width: 8px;
            height: 8px;
          }
        }
      }

      :deep(.el-radio-group) {
        .el-radio {
          margin-right: 20px;
          margin-bottom: 10px;

          .el-radio__input {
            .el-radio__inner {
              border: 3px solid #000;
              border-radius: 0;
              background: #fff;

              &::after {
                background: #000;
                border-radius: 0;
              }
            }

            &.is-checked .el-radio__inner {
              border-color: #000;
              background: #000;

              &::after {
                background: #fff;
              }
            }
          }

          .el-radio__label {
            color: #000;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
          }
        }
      }
    }

    .area-erase-tip {
      margin-bottom: 25px;

      :deep(.el-alert) {
        border-radius: 0;
        border: 3px solid #000;
        background: #fff;
        color: #000;

        .el-alert__title {
          font-weight: 900;
          text-transform: uppercase;
          letter-spacing: 1px;
        }

        .el-alert__content {
          font-weight: 600;
        }

        .el-alert__icon {
          color: #ff6b6b;
        }
      }
    }

    .action-buttons {
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: stretch;

      .action-btn {
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 20px;
        box-sizing: border-box;
        border: 4px solid #000;
        border-radius: 0;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.2s ease;

        &:hover {
          transform: translateX(-3px) translateY(-3px);
          box-shadow: 6px 6px 0px #000;
        }

        &.el-button--primary {
          background: #000;
          color: #fff;
          
          &:hover {
            background: #000;
            color: #fff;
          }
        }

        &.el-button--info {
          background: #fff;
          color: #000;
          
          &:hover {
            background: #fff;
            color: #000;
          }
        }

        :deep(.el-icon) {
          margin-right: 8px;
        }
      }
    }
  }
}

.preview-panel {
  min-height: 700px;
  background: #fff;
  border: 4px solid #000;
  border-radius: 0;
  box-shadow: 8px 8px 0px #000;

  :deep(.el-card__header) {
    padding: 25px 30px;
    border-bottom: 4px solid #000;
    background: #ff6b6b;
    color: #000;
  }

  :deep(.el-card__body) {
    padding: 30px;
  }

  .preview-content {
    .empty-preview {
      text-align: center;
      padding: 150px 40px;
      color: #666;

      .empty-icon {
        font-size: 120px;
        margin-bottom: 30px;
        color: #000;
      }

      p {
        font-size: 18px;
        margin: 0;
        font-weight: 600;
      }
    }

    .image-preview {
      .image-list {
        margin-bottom: 20px;
        border-radius: 0;
        background: #f0f0f0;
        padding: 15px;
        border: 3px solid #000;
        
        .image-list-inner {
          display: flex;
          gap: 15px;
          padding: 5px;
          
          .image-item {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 0;
            overflow: hidden;
            cursor: pointer;
            border: 3px solid #000;
            transition: all 0.2s ease;
            background: #fff;
            
            &:hover {
              transform: translateX(-3px) translateY(-3px);
              box-shadow: 6px 6px 0px #000;
            }
            
            &.active {
              border-color: #ff6b6b;
              box-shadow: 6px 6px 0px #ff6b6b;
            }
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            
            .image-number {
              position: absolute;
              top: 5px;
              right: 5px;
              background: #000;
              color: #fff;
              border-radius: 0;
              padding: 4px 8px;
              font-size: 12px;
              font-weight: 900;
            }
          }
        }
      }

      .preview-tabs {
        :deep(.el-tabs__header) {
          margin-bottom: 25px;
          border-bottom: 4px solid #000;

          .el-tabs__item {
            font-size: 16px;
            font-weight: 900;
            padding: 0 25px;
            height: 45px;
            line-height: 45px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: 3px solid transparent;
            border-bottom: none;
            border-radius: 0;
            transition: all 0.2s ease;

            &.is-active {
              background: #000;
              color: #fff;
              border-color: #000;
            }

            &:hover {
              background: #f0f0f0;
              color: #000;
            }
          }
        }
      }

      .image-container {
        text-align: center;
        padding: 30px 20px;
        min-height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f0f0f0;
        border: 3px solid #000;

        .image-wrapper {
          position: relative;
          display: inline-block;
          border: 3px solid #000;
          background: #fff;
          padding: 10px;
        }

        .preview-image {
          max-width: 100%;
          max-height: 600px;
          border-radius: 0;
          box-shadow: 8px 8px 0px #000;
          transition: all 0.2s ease;
          user-select: none;
          border: 3px solid #000;

          &:hover {
            transform: translateX(-3px) translateY(-3px);
            box-shadow: 11px 11px 0px #000;
          }
        }

        .selection-box {
          position: absolute;
          pointer-events: none;

          .selection-border {
            width: 100%;
            height: 100%;
            border: 4px dashed #ff6b6b;
            background: rgba(255, 107, 107, 0.1);
            border-radius: 0;
          }

          .selection-info {
            position: absolute;
            top: -40px;
            left: 0;
            background: #ff6b6b;
            color: #000;
            padding: 6px 12px;
            border-radius: 0;
            font-size: 12px;
            white-space: nowrap;
            font-weight: 900;
            text-transform: uppercase;
            border: 3px solid #000;

            &::after {
              content: '';
              position: absolute;
              top: 100%;
              left: 10px;
              border: 8px solid transparent;
              border-top-color: #000;
            }
          }
        }
      }
    }
  }
}

// 响应式内边距调整
@media (max-width: 1600px) {
  .blur-tool-container {
    padding: 40px 60px;
  }
}

@media (max-width: 1200px) {
  .blur-tool-container {
    padding: 30px 40px;
  }

  .tool-header {
    .back-btn {
      position: static;
      transform: none;
      margin-bottom: 20px;
    }

    .tool-title {
      font-size: 36px;
    }
  }

  .preview-panel {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .blur-tool-container {
    padding: 20px 15px;
  }

  .tool-header .tool-title {
    font-size: 28px;
  }

  .tool-content {
    :deep(.el-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    :deep(.el-col) {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
  }

  .control-panel,
  .preview-panel {
    :deep(.el-card__body) {
      padding: 20px;
    }
  }
}
</style>
